<template>
  <div>
  <h-table-list
      type="local"
      :data="tableData"
      border
      :page-sizes="[5, 10]"
      :columns="columns"
      :form-options="formOptions"
    >
       <!-- <ListOpearteButton /> -->
       <div>
           <el-button @click="add">新增点检项</el-button>
           <el-button @click="add">批量导入</el-button>
           <el-button @click="add">导入下载模板</el-button>
       </div>
      <template slot="preview-column" slot-scope="scope">
       <div>{{scope.row.status}}</div>
      </template>
      
      <template slot="operate-btn" slot-scope="scope">
       <div>
           <el-button @click="edit(scope.row.id)">编辑</el-button>
           <el-button @delete="deleted(scope.row.id)">删除</el-button>
       </div>
      </template>
    </h-table-list>
   <DownloadIdentify
      @cancel="cancel"
      @update="addChooseDevices"
      :visible.sync="dialogDeviceVisible"
      title="添加点检项"
    >
     <div class="checked-device">
      <el-button @click="addCheckedNocontentItem">添加空白点检项</el-button>
      <el-form
        :model="productRuleForm"
        ref="productRuleForm"
        :rules="productRuleForm.rules"
        :show-message="false"
      >
        <h-table-list
          border
          type="local"
          :data="productRuleForm.tableData"
          :page-sizes="[10, 20]"
          :columns="column2s"
        >
          <!--用插槽templete占位替换自定义部分 -->
          <template slot="operate-part" slot-scope="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + '.part'"
              :rules="productRuleForm.rules.part"
            >
              <el-input
                v-model="productRuleForm['tableData'][scope.$index].part"
              ></el-input>
            </el-form-item>
          </template>
          <template slot="operate-content" slot-scope="scope">
             <el-form-item
              :prop="'tableData.' + scope.$index + '.content'"
              :rules="productRuleForm.rules.content"
            >
              <el-input
                v-model="productRuleForm['tableData'][scope.$index].content"
              ></el-input>
            </el-form-item>
          </template>
          <template slot="operate-standard" slot-scope="scope">
              <el-form-item
              :prop="'tableData.' + scope.$index + '.standard'"
              :rules="productRuleForm.rules.standard"
            >
              <el-input
                v-model="productRuleForm['tableData'][scope.$index].standard"
              ></el-input>
            </el-form-item>
          </template>
          <template slot="operate-method" slot-scope="scope">
              <el-form-item
              :prop="'tableData.' + scope.$index + '.method'"
              :rules="productRuleForm.rules.method"
            >
              <el-input
                v-model="productRuleForm['tableData'][scope.$index].method"
              ></el-input>
            </el-form-item>
          </template>
          <template slot="is-uploadimg" slot-scope="scope">
             <el-form-item
              :prop="'tableData.' + scope.$index + '.upPicFlag'"
              :rules="productRuleForm.rules.upPicFlag"
            >
              <el-select
                v-model="productRuleForm['tableData'][scope.$index].upPicFlag"
              >
               <el-option :value="0" :label="'不上传'"></el-option>
              <el-option :value="1" :label="'选填'"></el-option>
              <el-option :value="2" :label="'必填'"></el-option>
              </el-select>
            </el-form-item>
          </template>
          <template slot="is-uploadvideo" slot-scope="scope">
             <el-form-item
              :prop="'tableData.' + scope.$index + '.upVideoFlag'"
              :rules="productRuleForm.rules.upVideoFlag"
            >
              <el-select
                v-model="productRuleForm['tableData'][scope.$index].upVideoFlag"
              >
              <el-option :value="0" :label="'不上传'"></el-option>
              <el-option :value="1" :label="'选填'"></el-option>
              <el-option :value="2" :label="'必填'"></el-option>
              </el-select>
            </el-form-item>
          </template>
          <template slot="operate-button">
            <el-button>删除</el-button>
          </template>
        </h-table-list>
      </el-form>
    </div>
    </DownloadIdentify>
  </div> 
</template>

<script>
import ListOpearteButton from "@/components/AllButton/button2";
import DownloadIdentify from "@/components/FormDialog";
export default {
    components:{ListOpearteButton,DownloadIdentify},
  data() {
    return {
        productRuleForm: {
        tableData: [
          {
            part: "1", //点检部位
            content: "2", //点检内容
            standard: "", //点检基准 非必须
            method: "", //点检方法 非必须
            upPicFlag: 0, //上传图片 0不上传 1选填 2必填
            upVideoFlag: 0, //上传图片 0不上传 1选填 2必填
          },
        ],
        rules: {
          part: [{ required: true, message: "请选择日期", trigger: "blur" }],
          content: [{ required: true, message: "请输入姓名", trigger: "blur" }],
          standard: [
            { required: true, message: "请输入电话号码", trigger: "blur" },
          ],
          method: [{ required: true, message: "请输入地址", trigger: "blur" }],
          upPicFlag: [
            { required: true, message: "请输入地址", trigger: "blur" },
          ],
          upVideoFlag: [
            { required: true, message: "请输入地址", trigger: "blur" },
          ],
        },
      },  
      column2s: [
        { type: "index", label: "序号" },
        { prop: "id", label: "序号", width: 140 },
        {
          prop: "name",
          label: "点检部位",
          minWidth: 180,
          slotName: "operate-part",
        },

        {
          prop: "deviceName",
          label: "点检内容",
          width: 100,
          slotName: "operate-content",
          // render: (row) => {
          //   const { deviceInfo } = row;
          //   return deviceInfo.name ? deviceInfo.name :"";
          // },
        },
        {
          prop: "deviceNumber",
          label: "点检基准",
          width: 100,
          slotName: "operate-standard",
          // render: (row) => {
          //   const { deviceInfo } = row;
          //   return deviceInfo.deviceNumber ? deviceInfo.deviceNumber :"";
          // },
        },
        // { prop: "departmentName", label: "使用部门", minWidth: 180, render: (row) => {
        //     const { departmentInfo } = row;
        //     return departmentInfo.name ? departmentInfo.name :"";
        //   },},
        {
          prop: "departmentName",
          label: "点检方法",
          minWidth: 180,
          slotName: "operate-method",
        },
        {
          prop: "membName",
          label: "上传图片",
          minWidth: 180,
          slotName: "is-uploadimg",
        },
        {
          prop: "membName",
          label: "上传视频",
          minWidth: 180,
          slotName: "is-uploadvideo",
        },
        {
          prop: "operate",
          label: "操作",
          minWidth: 240,
          slotName: "operate-button",
        },
      ],
      dialogDeviceVisible:false,
      formOptions: {
        inline: true,
        submitBtnText: "搜索",
        forms: [
          {
            prop: "itemGId",
            label: "分组",
            itemType: "select", 
            options: [
              { value: "", label: "部门1" },
              { value: 0, label: "部门2" },
              { value: 1, label: "部门3" },
            ],
          },
          { prop: "part", label: "点检部位" },

          { prop: "content", label: "点检内容",  },
          

        ],
      },
      columns: [
        { prop: "name", label: "分组", width: 140 },
        { prop: "part", label: "点检部位", minWidth: 180 },
        {
          prop: "content",
          label: "点检内容",
        
          width: 100,
        },
        {
          prop: "standard",
          label: "点检基准",
          width: 100,
          render: (row) => {
            const { sex } = row;
            return sex === 0 ? "Male" : sex === 1 ? "Female" : "Unknow";
          },
        },
        { prop: "method", label: "点检方法", minWidth: 180 },
        { prop: "upPicFlag", label: "上传图片", minWidth: 180 },
        { prop: "upVideoFlag", label: "上传视频", minWidth: 180 },
         { prop: "operate", label: "操作",slotName:"operate-btn", minWidth: 180 },
      ],
      tableData: [
        { name: "1", mobile: "15299xxxx", sex: 0 },
        { name: "2", mobile: "13452xxxx", sex: 1 },
        { name: "3", mobile: "187233xxxx", sex: 0,status:"0" },
      ],
    };
  },
  methods:{
   add(){
       this.dialogDeviceVisible=true
   },
   edit(){
       this.dialogDeviceVisible=true
   },
   addChooseDevices(){
       this.dialogDeviceVisible=false
   },
   addCheckedNocontentItem() {
      //添加空白点检项
      //this.tableData2s.push({id:this.tableData2s.length})
      this.productRuleForm.tableData.push({
        date: "",
        name: "",
        phone: "",
        address: "",
      });
    },
  }
};
</script>
